<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css"
	href="../resources/admin/css/header.css">
<link rel="stylesheet" type="text/css"
	href="../resources/admin/css/criclemenu.css">
<link rel="stylesheet" type="text/css"
	href="../resources/admin/css/add-category.css">
<link rel="stylesheet" type="text/css"
	href="../resources/admin/css/category.css">

<link rel="stylesheet" type="text/css"
	href="../resources/admin/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
	href="../resources/admin/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css"
	href="../resources/admin/css/examples.css">
<link rel="stylesheet" type="text/css"
	href="../resources/admin/css/image-picker.css">
<script async="" src="../resources/admin/js/analytics.js"></script>
<script src="../resources/admin/js/jquery.min.js" type="text/javascript"></script>
<script src="../resources/admin/js/prettify.js" type="text/javascript"></script>
<script src="../resources/admin/js/jquery.masonry.min.js"
	type="text/javascript"></script>
<script src="../resources/admin/js/show_html.js" type="text/javascript"></script>
<script src="../resources/admin/js/image-picker.js"
	type="text/javascript"></script>

</head>
<body>

	<br></br>

	<form:form method="POST" action="createProductDetail.html">
		<div class="CSSTableGenerator">

		
			<div>
				<form:label path="price">Giá Sản Phẩm: </form:label>
				<form:input path="price" style="margin-left: 200px" />
				<hr width="100%">
			</div>

			<div>
				<form:label path="oldPrice">Giá Sản Phẩm: </form:label>
				<form:input path="oldPrice" style="margin-left: 200px" />
				<hr width="100%">
			</div>


			<div>
				<label>Size: </label>
				<div class="picker" style="margin-left: 300px;">
					<form:select path="typeDetails" multiple="multiple"
						class="image-picker">
						<c:forEach var="typeDetail" items="${typeDetails}">
							<c:if test="${typeDetail.type.typeId == 1}">
								<option
									data-img-src="../resources/images/${typeDetail.typeDetailName}.jpg"
									value="${typeDetail.typeDetailId}">${typeDetail.typeDetailName}</option>
							</c:if>

						</c:forEach>

					</form:select>


					<hr width="100%">
				</div>
			</div>

			<div>
				<label>Hình Ảnh Sản Phẩm</label> <br></br>
				<div class="picker">
					<form:select path="images" multiple="multiple" class="image-picker">
						<c:forEach var="image" items="${images}">

							<option data-img-src="../${image.imageUrl}"
								value="${image.imageId}">Hình thứ: ${image.imageId}</option>

						</c:forEach>

					</form:select>

				</div>
				<hr width="100%">
			</div>


		</div>

		<input type="submit" value="Lưu" class="button"
			style="margin-top: 30px; margin-left: 150px;" />

		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />

	</form:form>

	<script type="text/javascript">
		jQuery("select.image-picker").imagepicker({
			hide_select : false,
		});

		jQuery("select.image-picker.show-labels").imagepicker({
			hide_select : false,
			show_label : true,
		});

		jQuery("select.image-picker.limit_callback").imagepicker({
			limit_reached : function() {
				alert('We are full!')
			},
			hide_select : false
		});

		var container = jQuery("select.image-picker.masonry").next(
				"ul.thumbnails");
		container.imagesLoaded(function() {
			container.masonry({
				itemSelector : "li",
			});
		});
	</script>
</body>
